<script setup>
import {ref} from 'vue'
import {checkNullObj} from '@/utils/check-obj'
import {notificationMess} from '@/utils/message'
import deepClone from '@/utils/deepClone'

//接收参数
const props = defineProps({
  modelValue: {
    type: Object
  },
  formConfig: {
    type: Object
  },
  hideBtn: {
    type: Boolean,
    default: false
  },
  formProps: {
    type: Object
  }
})

//定义发射事件
const emit = defineEmits(['confirm', 'cancel'])

const handleConfirm = () => {
  //检测数据完整性
  if (!checkNullObj(props.modelValue)) return notificationMess.error('数据不完整')

  emit('confirm')
}

const handleCancel = () => emit('cancel')
</script>

<template>
  <el-form label-width="80" label-position="left" v-bind="formProps">
    <template v-for="{type,slotName,itemConfig,...item} in formConfig" :key="item.prop">
      <el-form-item v-bind="item">
        <!-- 上传 -->
        <template v-if="type === 'upload'">
          <upload-image v-model="modelValue[item.prop]"/>
        </template>

        <!-- 价格 -->
        <template v-else-if="type === 'number'">
          <el-input-number v-model="modelValue[item.prop]" :placeholder="`请输入${item.label}`"
                           :min="1" :precision="2" :max="999" v-bind="itemConfig?.numberConfig"/>
        </template>

        <!-- 状态 -->
        <template v-else-if="type === 'switch'">
          <el-switch v-model="modelValue[item.prop]" :active-value="1" :inactive-value="0"/>
        </template>

        <!-- 数组 -->
        <template v-else-if="type === 'array'">
          <!-- 上传数组 -->
          <template v-if="itemConfig.arrayType === 'upload'">
            <upload-files v-model="modelValue[item.prop]" :media-type="itemConfig.mediaType"
                          :array-limit="itemConfig.arrayLimit"/>
          </template>
          <!-- 表单数组 -->
          <template v-else-if="itemConfig.arrayType === 'form'">
            <form-array v-model="modelValue[item.prop]" :default-item-value="itemConfig.defaultItemValue"
                        :form-config="itemConfig.formConfig"/>
          </template>
        </template>

        <!-- 表单 -->
        <template v-else-if="type === 'form'">
          <div class="children-form">
            <app-form v-model="modelValue[item.prop]" :form-config="itemConfig.formConfig" hide-btn/>
          </div>
        </template>

        <!-- 自定义 -->
        <template v-else-if="type === 'custom'">
          <slot :name="slotName" :prop="item.prop" :value="modelValue[item.prop]"></slot>
        </template>

        <!-- 默认输入框 -->
        <template v-else>
          <el-input v-model="modelValue[item.prop]" :placeholder="`请输入${item.label}`"/>
        </template>
      </el-form-item>
    </template>
  </el-form>

  <div class="btns" v-if="!hideBtn">
    <el-button @click="handleCancel">取消</el-button>
    <el-button type="primary" @click="handleConfirm">确定</el-button>
  </div>
</template>

<style lang="scss" scoped>
.el-input-number {
  width: 100%;
}

.el-form-item {
  margin-bottom: $spacing-3;
}

.children-form {
  padding: $spacing-1 0 0;
  margin-left: -80px;
  width: calc(100% + 65px);
}

.btns {
  margin-top: $spacing-1;
  @include flex-box(true);
}
</style>
